<template>
  <div id="cards">
    <div class="card-item" v-for="card in cards" :key="card.title">
      <div class="card-header">
        <div class="card-header-left">{{ card.title }}</div>
        <!-- <div class="card-header-right">{{ '0' + (i + 1) }}</div> -->
      </div>
      <dv-charts class="ring-charts" :option="card.ring" />
      <!-- <div class="water-level-box">
        <dv-water-level-pond :config="card.config" />
      </div> -->
      <div class="card-footer">
        <div class="card-footer-item">
          <div class="footer-title">累计检测</div>
          <div class="footer-detail">
            <dv-digital-flop
              :config="card.total"
              style="width: 70%; height: 35px"
            />块
          </div>
        </div>
        <div class="card-footer-item">
          <div class="footer-title">不合格数</div>
          <div class="footer-detail">
            <dv-digital-flop
              :config="card.num"
              style="width: 70%; height: 35px"
            />块
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="Cards">
import { toRefs, PropType, ref, reactive } from 'vue'

const props = defineProps({
  tileData: {
    type: Object,
    default: {}
  }
})
let { tileData } = toRefs(props)
let cards = reactive([])
const createData = () => {
  const currentDate = new Date()
  const year = currentDate.getFullYear()
  const month = currentDate.getMonth() + 1 // 月份从 0 开始，所以加 1
  const day = currentDate.getDate()

  cards = new Array(6).fill(0).map((foo, i) => {
    const totalNumber = randomExtend(9000, 10000)
    const numNumber = randomExtend(30, 60)
    const rate = ((numNumber / totalNumber) * 100).toFixed(2)
    return {
      title: year + '年 ' + month + '月 ' + (day - i) + '日 ',
      total: {
        number: [totalNumber],
        content: '{nt}',
        textAlign: 'right',
        style: {
          fill: '#26fcd8',
          fontWeight: 'bold'
        }
      },
      num: {
        number: [numNumber],
        content: '{nt}',
        textAlign: 'right',
        style: {
          fill: '#ea6027',
          fontWeight: 'bold'
        }
      },
      config: {
        data: [rate],
        shape: 'round',
        waveHeight: 25,
        waveNum: 2
      },
      ring: {
        series: [
          {
            type: 'gauge',
            startAngle: -Math.PI / 2,
            endAngle: Math.PI * 1.5,
            arcLineWidth: 13,
            radius: '80%',
            data: [{ name: '不合格率', value: rate }],
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            pointer: {
              show: false
            },
            backgroundArc: {
              style: {
                stroke: '#224590'
              }
            },
            details: {
              show: true,
              formatter: '不合格率{value}%',
              style: {
                fill: '#f46827',
                fontSize: 20
              }
            }
          }
        ],
        color: ['#f46827']
      }
    }
  })
}

const randomExtend = (minNum, maxNum) => {
  if (arguments.length === 1) {
    return parseInt(Math.random() * minNum + 1, 10)
  } else {
    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
  }
}
createData()

setInterval(createData, 30000)
</script>

<style scoped>
#cards {
  display: flex;
  justify-content: space-between;
  height: 45%;
}
.card-item {
  background-color: rgba(6, 30, 93, 0.5);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  width: 15%;
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  height: 20%;
  align-items: center;
  justify-content: space-between;
}
.card-header-left {
  font-size: 18px;
  font-weight: bold;
  padding-left: 20px;
}

.card-header-right {
  padding-right: 20px;
  font-size: 24px;
  color: #03d3ec;
}

.ring-charts {
  height: 55%;
}

.card-footer {
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.card-footer-item {
  padding: 5px 10px 0px 10px;
  box-sizing: border-box;
  width: 40%;
  background-color: rgba(6, 30, 93, 0.7);
  border-radius: 3px;
}
.footer-title {
  font-size: 15px;
  margin-bottom: 5px;
}

.footer-detail {
  font-size: 20px;
  color: #1294fb;
  display: flex;
  font-size: 18px;
  align-items: center;
}
.dv-digital-flop {
  margin-right: 5px;
}
.water-level-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dv-water-pond-level {
  width: 200px;
  height: 200px;
  border: 10px solid #19c3eb;
  border-radius: 50%;
}

.dv-water-pond-level ellipse {
  stroke: transparent !important;
}

.dv-water-pond-level text {
  font-size: 24px;
}
</style>
